<template>
	<view class="login-box">
		<view class="box">
			<image src="https://pc.chinaonebuild.com/images/tj.png" mode="" class="imgs"></image>
			<view class="project-name">您好，欢迎登录PC数字空间</view>
			<view class="loginForm">
				<u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm" labelWidth="100rpx"
					labelAlign="left">
					<u-form-item borderBottom label="账号" prop="username">
						<u--input placeholder="请输入账号" border="none" v-model="loginForm.username" :customStyle="{height: '60rpx'}" />
					</u-form-item>
					<u-form-item borderBottom label="密码" prop="passwords" rightIcon="eye-off">
						<u--input v-if="passwordType=='password'" key="password" placeholder="请输入密码" border="none" type="password"
							v-model="loginForm.passwords" :customStyle="{height: '60rpx'}" />
						<u--input v-if="passwordType=='text'" key="password2" placeholder="请输入密码" border="none" type="text"
							v-model="loginForm.passwords" :customStyle="{height: '60rpx'}" />
						<view slot="right">
							<u-icon name="eye-fill" @click="clickHandler('password')" v-if="passwordType=='text'"
								size="38rpx"></u-icon>
							<u-icon name="eye-off" @click="clickHandler('text')" v-if="passwordType=='password'"
								size="38rpx"></u-icon>
						</view>
					</u-form-item>
					<u-form-item borderBottom label="验证码" prop="code">
						<u--input placeholder="请输入验证码" border="none" v-model="loginForm.code" :customStyle="{height: '60rpx'}" />
						<img style="height: 70rpx;width: 160rpx;position: absolute;right: 70rpx;z-index: 2;" :src="codeUrl" @click="getCode" />
					</u-form-item>
				</u--form>
				<u-button type="primary" text="立即登录" :loading="loading" @click="loginHandler" class="mt-20" color="#2289FF">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import WxmpRsa from 'wxmp-rsa'
	import {
		clearStorageSync
	} from '../../utils/utils';
	export default {
		data() {
			return {
				passwordType: 'password',
				loginForm: {
					username: '',//admin
					password: '',//Admin@2022_68a*p
					code: "",
					uuid: "",
					passwords: ''//Admin@2022_68a*p
				},
				rules: {
					username: {
						required: true,
						message: '请输入用户名',
						trigger: 'change'
					},
					passwords: {
						required: true,
						message: '请输入密码',
						trigger: 'change',
					},
					code: {
						required: true,
						message: '请输入验证码',
						trigger: 'change',
					},
				},
				loading: false,
				captchaOnOff: true,
				codeUrl: '',
				publicKey: 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
			};
		},
		methods: {
			getCode() {
				clearStorageSync('SET_TOKEN')
				this.$api.getCodeImg().then((res) => {
					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
					if (this.captchaOnOff) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.loginForm.uuid = res.uuid;
					}
				});
			},
			getRsaCode(str) {
				const rsa = new WxmpRsa()
				rsa.setPublicKey(this.publicKey);
				const data = rsa.encryptLong(str)
				return data
			},
			clickHandler(val) {
				this.passwordType = val
			},
			loginHandler() {
				this.$refs.loginForm.validate().then(valid => {
					if (valid) {
						uni.removeStorageSync('SET_TOKEN');
						// this.loading = true
						this.loginForm.password = this.getRsaCode(this.loginForm.passwords)
						this.$api.login(this.loginForm, {
							isToken: false
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon: "none",
									title: "登录成功",
								});
								this.$store.commit('SET_TOKEN', res.token)
								uni.setStorageSync('SET_TOKEN', res.token);
								getApp().globalData.token = res.token;

								this.$api.routers({
									applicationType: 'mobile'
								}).then((res2) => {
									this.$store.commit('SET_MENU', res2.data)
									uni.setStorageSync('SET_MENU', res2.data);
									getApp().globalData.menu = res2.data;
									this.getMenus(res2.data)
								});

								this.$api.getInfo().then(response => {
									let user = response.user
									const userName = user.userName
									const nickName = user.nickName
									const userId = user.userId
									this.$store.commit('SET_USERNAME', userName)
									this.$store.commit('SET_NICKNAME', nickName)
									this.$store.commit('SET_USERID', userId)
									uni.setStorageSync('username', userName);
									uni.setStorageSync('nickname', nickName);
									uni.setStorageSync('userid', response.roles);
									uni.setStorageSync('SET_ROLES', userId);
									getApp().globalData.username = userName;
									getApp().globalData.nickname = nickName;
									getApp().globalData.userid = userId;
									getApp().globalData.roles = response.roles;
								})
								// this.loading = false
								setTimeout(function() {
									uni.reLaunch({
										url: "/pages/index/index"
									})
								}, 50);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
								// this.loading = false
							}
						}).catch(err => {
							// this.loading = false
						})
					}
				})
			},
			getMenus(menus) {
				let ids = []
				let homeMenus = {}
				menus.forEach(menuit => {
					if (menuit.children) {
						menuit.children.forEach(item => {
							if (item.children) {
								item.children.forEach(it => {
									// if(it.component != 'Layout' && it.component != 'ParentView'){
									let obj = {}
									let labelKey = it.meta.title
									obj[labelKey] = it.component
									Object.assign(homeMenus, obj)
									ids.push(it.menuId)
									// }
								})
							}
						})
					}
				})
				uni.setStorageSync('APPLICATION_PATHS', homeMenus);
				uni.setStorageSync('APPLICATION_PATHS_IDS', ids);
			},
		},
		created() {
			this.getCode()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// getApp().globalData.userId = res.data.userId;
			this.$refs.loginForm.setRules(this.rules);
		}
	};
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-form {
		margin-bottom: 20rpx;
	}

	.imgs {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8px;
	}

	.login-box {
		background: url('https://pc.chinaonebuild.com/images/user/bg.png') no-repeat;
		background-size: cover;
		height: 100%;

		.box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 638rpx;
			height: 680rpx;
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.9);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 0 36rpx;

			.project-name {
				font-size: 32rpx;
				color: #474A55;
				// width: 500rpx;
				line-height: 50rpx;
			}
		}

		.mt-20 {
			width: 566rpx !important;
			height: 82rpx !important;
			position: absolute !important;
			bottom: 45rpx !important;
			left: 50% !important;
			border-radius: 36rpx !important;
			transform: translateX(-50%) !important;
			@include text-font-size(28rpx);
		}

		.loginForm {
			width: 566rpx;
		}
	}
</style>